import BasicCanvas from "@/components/image/LineCanvas/BasicCanvas";
import { TowerType } from "./enum";

export default class TowerCanvas extends BasicCanvas {
  towerType = {
    0: this.drawNaiZhang,
    1: this.drawZhiXian,
    2: this.drawZhanglichang,
    3: this.drawQianyinchang,
  };

  constructor(
    canvas: HTMLCanvasElement,
    canvasConfig: CanvasConfig,
    private towerData: TowerPointModel[]
  ) {
    super(canvas, canvasConfig);
  }

  init() {
    super.init();
    this.ctx.translate(0, this.canvasConfig.height);
    this.ctx.translate(0, this.canvasConfig.startY * this.canvasConfig.scale);

    this.ctx.scale(1, -1);
    this.ctx.translate(
      this.canvasConfig.margin.left,
      this.canvasConfig.margin.bottom
    );
  }

  draw() {
    this.towerData.map((data) => {
      this.drawTower(data);
    });
  }

  private drawTower(data: TowerPointModel) {
    const { tower, x, y } = data;
    const { tName, altitude, tStyle, tType } = tower;

    this.ctx.save();
    this.ctx.translate(
      x * this.canvasConfig.scale,
      y * this.canvasConfig.scale
    );

    // 绘制铁塔 此段代码是否可以优化
    const t = TowerType[
      tStyle as any
    ] as unknown as keyof typeof this.towerType;
    this.towerType[t].call(this);

    this.ctx.translate(10, 50);
    super.drawText(tName, [0, 0], "12px consolas", "left", "middle");
    if (tType) {
      this.ctx.translate(0, -17);
      super.drawText(tType, [0, 0], "12px consolas", "left", "middle");
    }
    this.ctx.translate(0, -17);
    super.drawText(
      "高程:" + altitude.toString() + "m",
      [0, 0],
      "12px consola",
      "left",
      "middle"
    );
    this.ctx.restore();
  }

  private drawNaiZhang() {
    super.drawLine([-10, -5], [0, 0]);
    super.drawLine([0, 0], [+10, -5]);
    super.drawLine([0, 10], [0, -40]);
  }

  private drawZhiXian() {
    super.drawLine([-10, 0], [+10, 0]);
    super.drawLine([0, 10], [0, -40]);
  }

  private drawZhanglichang() {
    super.drawCircle([0, 0], 4, true, "", "#2d3436");
    super.drawCircle([0, 0], 8, false, "#6c5ce7", "");
    super.drawCircle([-8, 0], 8, false, "#e84393", "");
  }

  private drawQianyinchang() {
    super.drawCircle([0, 0], 4, true, "", "#2d3436");
    super.drawCircle([0, 0], 8, false, "#6c5ce7", "");
    super.drawCircle([-8, 0], 8, false, "#e84393", "");
  }
}
